<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"></script>
    <script src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="container">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM  -->
    <div id="main" style="width: 400px;height:300px;"></div>

    <select v-model="cclass">
        <option v-for="v ,index in cclasses">{{v}}</option>
    </select>

    <button id="btn_chart" @click="chart">按钮</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var vm = new Vue({
        el: "#container",
        data: {
            count:0,
            courses:[],
            grades:[],
            cclass:"",
            cclasses:[],
        },
        created:function (){
            axios({
                url: "/student/selectCclass",
                method: "get"
            }).then((res)=>{
                this.cclasses=res.data.data;
                console.log(this.cclasses);
            })
        },
        methods: {

            //纵轴该科目的平均分  横轴 学科名
            chart:function (){
                console.log("选择的"+this.cclass);
                axios({
                    url:"/student/columnChart?cclass="+this.cclass,
                    method:"get"
                }).then((res)=>{
                    console.log(res.data.data);
                    var  stu=res.data.data;
                    this.count=res.data.data.length;
                    console.log("人数"+this.count);

                    for (var i=0;i<stu[0].courses.length;i++){
                        this.courses[i]=stu[0].courses[i].cname;
                    }
                    //将计算出科目的平均分 存在grade[]中
                    var sum=0;
                    for (var j = 0; j < stu[0].grades.length; j++) {
                        for (var i = 0; i < stu.length; i++) {

                            sum += stu[i].grades[j].score;
                        }
                        this.grades[j]=sum/stu.length;
                    }
                    console.log("平均分"+this.grades);

                    console.log(this.courses);

                    var myChart = echarts.init(document.getElementById('main'));
                   // var myChart1 = echarts.init(document.getElementById('main1'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '柱形图'
                        },
                        tooltip: {},
                        legend: {
                            data: ['平均分']
                        },
                        xAxis: {
                            data: vm.courses
                        },
                        yAxis: {},
                        //系列
                        series: [
                            {
                                name: '平均分',
                                type: 'bar',
                                data: vm.grades
                            }
                        ]
                    };
                    console.log("x");
                    myChart.setOption(option);
                });
            }
        }
    });

    /*$("#btn_chart").click(function (){
        $.get("/student/columnChart",function (data,ststus){
            console.log(data);

            var option1 = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    //['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    data: data.data[0].courses[0].cname
                },
                yAxis: {},
                //系列
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            myChart1.setOption(option1);
        })
    });*/


</script>
</html>